<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 500px;height: 500px;border: 1px solid black;position: relative;margin: 20px auto;}
        #ball{width: 20px;height: 20px;background: red;border-radius: 50%;position: absolute;
            bottom: 30px;left: 250px;}
        #bat{width: 100px;height: 30px;background: blue;border-radius: 10%;
            position: absolute;bottom: 0;left: 200px;}
        #brick div{width: 98px;height: 20px;border: 1px solid black;float: left;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oBall = document.getElementById("ball");
            var oBat = document.getElementById("bat");
            var oBrick = document.getElementById("brick");
            var aBricks = oBrick.getElementsByTagName("div");

            createBrick(50);
            dragX(oBat);
            var speedX = parseInt(Math.random()*4)+3;
            var speedY = -(parseInt(Math.random()*3)+5);
            setInterval(function(){
                oBall.style.left = oBall.offsetLeft + speedX +"px";
                oBall.style.top = oBall.offsetTop + speedY +"px";
                if(oBall.offsetLeft<=0||oBall.offsetLeft>=480){
                    speedX *= -1;
                }
                if(oBall.offsetTop<=0||oBall.offsetTop>=480){
                    speedY *= -1;
                }
                if(oBall.offsetTop>=480){
                    alert("GAME OVER");
                    window.location.reload();
                }
                /*碰撞检测*/
                if(konck(oBall,oBat)){
                    speedY*=-1;
                }
                for(let i=0;i<aBricks.length;i++){
                    if(konck(aBricks[i],oBall)){
                        speedY *=-1;
                        oBrick.removeChild(aBricks[i]);
                        break;
                    }
                }
            },30)
        }
        function dragX(node){
            node.onmousedown = function(ev){
                var e = ev||window.event;
                var offsetX = e.clientX-node.offsetLeft;
                document.onmousemove = function(ev){
                    var e = ev||window.event;
                    var l = e.clientX - offsetX;
                    if(l<=0)l=0;
                    if(l>=400) l=400;
                    node.style.left = l +"px";
                }
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
        /*
            文档流的转换
            相对定位  转  绝对定位
        */
        function createBrick(n){
            var oBrick = document.getElementById("brick");
            for(let i =0;i<n;i++){
                var node = document.createElement("div");
                node.style.backgroundColor=randomColor();
                oBrick.appendChild(node);
            }
            var aBricks = oBrick.getElementsByTagName("div");
            for(let i=0;i<aBricks.length;i++){
                aBricks[i].style.left = aBricks[i].offsetLeft + "px";
                aBricks[i].style.top = aBricks[i].offsetTop + "px";
            }
            for(let i=0;i<aBricks.length;i++){
                aBricks[i].style.position = "absolute";
            }
        }
        function randomColor(){
            return "rgba(" + parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+",1)";
        }
        //碰撞
        function konck(node1,node2){
            var l1 = node1.offsetLeft;
            var r1 = node1.offsetLeft + node1.offsetWidth;
            var t1 = node1.offsetTop;
            var b1 = node1.offsetTop + node1.offsetHeight;
            
            var l2 = node2.offsetLeft;
            var r2 = node2.offsetLeft + node2.offsetWidth;
            var t2 = node2.offsetTop;
            var b2 = node2.offsetTop + node2.offsetHeight;
            if(l2>r1||r2<l1||t2>b1||b2<t1){
                return false;
            }else{
                return true;
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <div id="ball"></div>
        <div id="bat"></div>
        <div id="brick">
            <!-- <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div> -->
        </div>
    </div>
</body>
</html>